"use client";

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Search } from "lucide-react";

// 模拟产品数据
const products = [
  {
    id: 1,
    name: "智能工业机器人",
    image: "https://images.pexels.com/photos/8566526/pexels-photo-8566526.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "东方制造集团",
    category: "制造设备",
    price: "¥150,000起",
    description: "高精度智能工业机器人，适用于各类工业生产场景，提高生产效率和精度。",
    features: ["高精度", "智能控制", "远程操作", "多场景适用"],
  },
  {
    id: 2,
    name: "企业大数据分析平台",
    image: "https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "华夏科技有限公司",
    category: "软件服务",
    price: "¥50,000/年",
    description: "基于人工智能的企业大数据分析平台，帮助企业挖掘数据价值，优化决策流程。",
    features: ["实时分析", "智能预测", "可视化报表", "多源数据集成"],
  },
  {
    id: 3,
    name: "太阳能光伏发电系统",
    image: "https://images.pexels.com/photos/356036/pexels-photo-356036.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "绿源环保科技",
    category: "新能源设备",
    price: "¥200,000起",
    description: "高效太阳能光伏发电系统，适用于工商业屋顶和地面电站，绿色环保，长期稳定发电。",
    features: ["高转换效率", "智能监控", "抗恶劣天气", "25年质保"],
  },
  {
    id: 4,
    name: "企业财务管理系统",
    image: "https://images.pexels.com/photos/6801648/pexels-photo-6801648.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "金融创新投资",
    category: "软件服务",
    price: "¥30,000/年",
    description: "全面的企业财务管理系统，涵盖会计、税务、资金管理等功能，提升财务管理效率。",
    features: ["多账套管理", "税务筹划", "资金预警", "财务报表"],
  },
  {
    id: 5,
    name: "便携式医疗检测设备",
    image: "https://images.pexels.com/photos/4226148/pexels-photo-4226148.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "康健医疗科技",
    category: "医疗设备",
    price: "¥80,000起",
    description: "便携式多功能医疗检测设备，可快速检测多项生理指标，适用于社区医院和家庭保健。",
    features: ["快速检测", "高精度", "便携式", "多项指标"],
  },
  {
    id: 6,
    name: "智能教育平板",
    image: "https://images.pexels.com/photos/4050315/pexels-photo-4050315.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "智慧教育集团",
    category: "教育设备",
    price: "¥3,999起",
    description: "专为K12教育设计的智能教育平板，预装丰富教育资源，支持互动教学和个性化学习。",
    features: ["护眼屏幕", "丰富资源", "家校互联", "AI辅导"],
  },
  {
    id: 7,
    name: "工业废水处理系统",
    image: "https://images.pexels.com/photos/2519390/pexels-photo-2519390.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "绿源环保科技",
    category: "环保设备",
    price: "¥300,000起",
    description: "高效工业废水处理系统，适用于各类工业废水处理，达标排放，环保节能。",
    features: ["高处理效率", "低能耗", "自动化控制", "远程监控"],
  },
  {
    id: 8,
    name: "企业网络安全防护系统",
    image: "https://images.pexels.com/photos/60504/security-protection-anti-virus-software-60504.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    company: "华夏科技有限公司",
    category: "软件服务",
    price: "¥100,000/年",
    description: "全方位企业网络安全防护系统，提供实时监控、威胁检测、数据加密等功能。",
    features: ["实时监控", "威胁检测", "数据加密", "安全审计"],
  },
];

// 产品分类
const categories = ["全部", "制造设备", "软件服务", "新能源设备", "医疗设备", "教育设备", "环保设备"];

export default function ProductsPage() {
  return (
    <div className="container py-10">
      <div className="space-y-4 text-center mb-10">
        <h1 className="text-3xl font-bold">企业产品</h1>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          展示会员企业的优质产品，促进产品推广和企业合作
        </p>
      </div>

      {/* 搜索和筛选 */}
      <div className="flex flex-col md:flex-row gap-4 mb-8">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
          <Input placeholder="搜索产品..." className="pl-10" />
        </div>
        <div className="w-full md:w-[200px]">
          <Select defaultValue="默认排序">
            <SelectTrigger>
              <SelectValue placeholder="排序方式" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="默认排序">默认排序</SelectItem>
              <SelectItem value="价格从低到高">价格从低到高</SelectItem>
              <SelectItem value="价格从高到低">价格从高到低</SelectItem>
              <SelectItem value="最新发布">最新发布</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* 产品分类和列表 */}
      <Tabs defaultValue="全部" className="mb-10">
        <TabsList className="flex flex-wrap justify-center mb-8">
          {categories.map((category) => (
            <TabsTrigger key={category} value={category}>
              {category}
            </TabsTrigger>
          ))}
        </TabsList>
        {categories.map((category) => (
          <TabsContent key={category} value={category}>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {products
                .filter((product) => category === "全部" || product.category === category)
                .map((product) => (
                  <Card key={product.id} className="overflow-hidden flex flex-col">
                    <div className="aspect-video w-full overflow-hidden">
                      <img
                        src={product.image}
                        alt={product.name}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <CardHeader>
                      <div className="flex justify-between items-start">
                        <CardTitle className="text-lg">{product.name}</CardTitle>
                        <Badge>{product.category}</Badge>
                      </div>
                      <CardDescription>{product.company}</CardDescription>
                    </CardHeader>
                    <CardContent className="flex-1">
                      <p className="text-sm text-muted-foreground mb-4">{product.description}</p>
                      <div className="flex flex-wrap gap-2 mb-2">
                        {product.features.map((feature) => (
                          <Badge key={feature} variant="outline">{feature}</Badge>
                        ))}
                      </div>
                      <p className="font-medium text-lg">{product.price}</p>
                    </CardContent>
                    <CardFooter className="border-t pt-4">
                      <Button className="w-full">查看详情</Button>
                    </CardFooter>
                  </Card>
                ))}
            </div>
          </TabsContent>
        ))}
      </Tabs>
    </div>
  );
}